import React,{useState} from 'react'
import { ResultPage, Card,Button,Input } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import styles from './css/home.module.css'
import { useNavigate } from 'react-router-dom'

const Home = () => {
    const nav= useNavigate()
    const [start, setStart] = useState('')
     const [end, setEnd] = useState('')

     const getList=()=>{
        nav(`/list?start=${start}&end=${end}`)
     }
  return (
    <div>
      <ResultPage
      status=''
      title=''
      description=''
    >
      <ResultPage.Card style={{ height: 64, padding: 8 }}>
         <Input
          placeholder='请输入出发地'
          value={start}
          onChange={val => {
            setStart(val)
          }}
        />
        <LoopOutline />
        <Input
          placeholder='请输入目的地'
          value={end}
          onChange={val => {
            setEnd(val)
          }}
        />
         <div className={styles.row}>
          <Button block color='warning' shape='rounded' onClick={()=> getList()}>
           搜索
        </Button>
         </div>
      </ResultPage.Card>

    </ResultPage>
    </div>
  )
}

export default Home
